<nz-modal [(nzVisible)]="visible" nzTitle="添加文章" (nzOnCancel)="handleCancel()" (nzOnOk)="handleCancel()">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="title">标题</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid title!">
        <input nz-input formControlName="title" id="title" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="type" nzRequired>类型</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your password!">
        <!-- <input nz-input type="text" id="type" formControlName="type" /> -->
        <nz-select formControlName="type" nzAllowClear nzPlaceHolder="Choose type">
          <nz-option *ngFor="let item of typeList" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="author" nzRequired>作者</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTpl">
        <input nz-input type="text" formControlName="author" id="author" />
      </nz-form-control>
    </nz-form-item>
    <!-- <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>
        <span>
          Nickname
          <i nz-icon nz-tooltip nzTitle="What do you want other to call you" nzType="question-circle"
            nzTheme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your nickname!">
        <input nz-input id="nickname" formControlName="nickname" />
      </nz-form-control>
    </nz-form-item> -->
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="content" nzRequired>文章内容</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['content']"
        nzErrorTip="Please input your content!">
        <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
          <!-- <ng-template> -->
          <!-- <nz-select formControlName="phoneNumberPrefix" class="phone-select">
              <nz-option nzLabel="+86" nzValue="+86"></nz-option>
              <nz-option nzLabel="+87" nzValue="+87"></nz-option>
            </nz-select> -->
          <!-- </ng-template> -->
          <textarea rows="4" nz-input formControlName="content" [nzAutosize]="textArea"></textarea>
          <!-- <input formControlName="phoneNumber" id="'phoneNumber'" nz-input type="textarea" /> -->
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="avatar" nzRequired>封面图url</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input website!">
        <input nz-input id="avatar" formControlName="avatar" placeholder="url" />
      </nz-form-control>
    </nz-form-item>
    <!-- <nz-form-item> -->
    <!-- <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>Captcha</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input the captcha you got!"
        nzExtra="We must make sure that your are a human.">
        <div nz-row [nzGutter]="8">
          <div nz-col [nzSpan]="12">
            <input nz-input formControlName="captcha" id="captcha" />
          </div>
          <div nz-col [nzSpan]="12">
            <button nz-button (click)="getCaptcha($event)">Get captcha</button>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item> -->
    <!-- <nz-form-item nz-row class="register-area">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <label nz-checkbox formControlName="agree">
          <span>I have read the <a>agreement</a></span>
        </label>
      </nz-form-control>
    </nz-form-item> -->
    <nz-form-item nz-row class="register-area">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary">添加</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>